<template>
	<view class="">
		<!-- {{ selectValue }} -->

		<u-form-item :label="item.label" borderBottom ref="item1" :prop="item.value" 
		:required="item.required">
			<view @click="!disabled && btntap()" style="flex: 1; padding: 0" ref="formitem">{{ inputValue }}</view>
		</u-form-item>
		<u-form-item v-for="item2 in activeOptions" :label="item2.label" borderBottom ref="item1" :prop="item2.value">
			<u--input placeholder="请输入内容" v-model="bindValue[item2.value]" border="none" @blur="blur">
			</u--input>
		</u-form-item>
		<!-- <u--input v-for="item2 in selectValue" :placeholder="item2" :type="item.type || 'text'" v-model="bindValue[item2]" border="none"
    :readonly="disabled" @blur="blur"></u--input> -->
		<u-action-sheet ref="actionSheet" round="20" :title="`多选${item.label}`" :actions="list" :actives="selectValue"
			:show="show" :closeOnClickAction="false" cancelText="关闭" @select="select"
			@close="show = false"></u-action-sheet>
	</view>
</template>

<script>
	export default {
		mixins: [uni.$u.mpMixin, uni.$u.mixin],
		data() {
			return {
				inputValue: "",
				show: false,
				activeOptions: [],
				selectValue: []
			};
		},
		computed: {
			disabled() {
      this.getParentData("u-form")
      return this.parent.disabled;
    },
			bindValue: {
				get() {
					if (!this.value) {
						this.$emit("input", {});
						return this.value || {};
					}
					return this.value;
				},
				set(val) {
					console.log(val, "val");
					this.$emit("input", val);
				},
			},
			// selectValue: {
			//   get() {
			//     if (!this.bindValue) {
			//       return [];
			//     }
			//     return Object.keys(this.bindValue);
			//   },
			//   set(val) {
			//     let emitval = {};
			//     val.forEach((item) => {
			//       emitval[item] = this.bindValue[item] || "";
			//     });
			//     this.$emit("input", emitval);
			//   },
			// },

			list() {
				let r = this.item.props.options.map((e) => {
					return {
						...e,
						name: e.label,
					};
				});
				return r;
			},
		},
		watch: {
			bindValue: {
				handler(newValue, oldValue) {
					if (!this.bindValue) {
						this.selectValue = [];
					}
					this.selectValue = Object.keys(this.bindValue);
				},
				immediate: true,
				deep: true,
			},

			value: {
				handler(newValue, oldValue) {
					this.setinputValue();
				},
				immediate: true,
				deep: true,
			},
		},
		props: {
			item: {
				typeof: Object,
				default: () => {
					return {};
				},
			},
			data: {
				typeof: Object,
				default: () => {
					return {};
				},
			},
			value: {
				typeof: [String, Number, Boolean, Array, Object],
				default: () => {
					return "";
				},
			},
		},

		methods: {
			blur() {
				this.$emit("input", this.bindValue);
			},
			setinputValue() {
				this.inputValue =
					this.selectValue
					.map((item) => {
						return this.list.find((e) => e.value == item).label;
					})
					.join(",") || "请选择";
				this.activeOptions =
					this.list.filter((item) => {
						return this.selectValue.includes(item.value);
					}) || [];
			},
			btntap() {
				this.show = true;
				this.$nextTick(() => {
					this.$refs.actionSheet.setactives(this.selectValue);
				});
			},
			select(e) {
				let i = this.selectValue.findIndex((item) => item == e.value);
				if (i != -1) {
					this.selectValue.splice(i, 1);
				} else {
					this.selectValue.push(e.value);
				}
				let emitval = {};
				this.selectValue.forEach((item) => {
					emitval[item] = this.bindValue[item] || "";
				});
				this.$emit("input", emitval);

				this.setinputValue();


			},
		},
	};
</script>

<style scoped lang="scss">
	.uni-input-input {
		font-size: 14px !important;
		color: #171a1d !important;
		line-height: 99rpx !important;
		height: 99rpx !important;
		padding-left: 10px;
	}

	.uni-forms-item__label {
		margin-left: 0;
		font-size: 14px !important;
		color: #171a1d !important;
		line-height: 99rpx !important;
		height: 99rpx !important;
	}
</style>